<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>
			菜品列表
		</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="{{__PUBLIC__}}/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/bootstrap/css/bootstrap.css"/>
		
		<style type="text/css">li span {
	display: inline-block;
	cursor: pointer;
}</style>
	</head>
	<body style="">
		<nav class="navbar navbar-default navbar-fixed-top" style="background: lightskyblue;">
			<div class="container-fluid container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar">
						</span>
						<span class="icon-bar">
						</span>
						<span class="icon-bar">
						</span>
					</button>
					<a class="navbar-brand" href="#" style="display: inline-block; padding: 0 0;">
						<img src="{{__VIEW__}}/Index/images/yueyanglou.jpg" style="width: 56px;height: 50px;" class="img-responsive" alt="Responsive image">
					</a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="#">
								会员注册
							</a>
						</li>
						<li>
							<a href="#">
								会员登录
							</a>
						</li>
						<form class="navbar-form navbar-left" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="菜品">
							</div>
							<button type="submit" class="btn btn-default">
								选择菜品
							</button>
						</form>
					</ul>
				</div>
			</div>
		</nav>
		<a href="javascript:history.go(-1);">
		向上一页
		</a>
		<section class="navbar navbar-default" style="margin-top: 50px;">
			<div class="container table-responsive" class="dp" style="padding: 20px 0;">
				{{foreach from="$data" key="$k" value="$v"}}
				<table class="table" border="" cellspacing="" style="font-size: 12px;margin-bottom: 15px;" cellpadding="">
					<tr>
						<td rowspan='3' style="width: 120px;">
							<img src="{{$v['pic']}}" style="width:100px;height:90px;margin: 0 auto;"/>
						</td>
						<td>
							{{$v['name']}}
						</td>
					</tr>
					<tr>
						<td class="">
							价格: <label for="" class="singleprice">{{$v['gprice']}}</label> 元
						</td>
					</tr>
					<tr>
						<td style="line-height: 15px;"> 
						<label for="">数量:</label>
						<button style="padding: 2px 15px;" onclick="jian(this,{{$v['id']}})" class="btn btn-success">[-]</button>
						<input type="text" style="width: 50px;height: 25px; text-align: center;" name="num" value="0" id="{{$v['id']}}"/>
						<button style="padding: 2px 15px;" onclick="jia(this,{{$v['id']}})" class="btn btn-success">[+]</button>
						</td>
					</tr>
					
				</table>
				{{endforeach}}
				
			</div>
			
		</section>
		<nav class="navbar navbar-default navbar-fixed-bottom">
		  <div class="container" style="padding: 5px 20px;">
		  	<div class="num" style="float: left;padding: 6px 2px;">
		  		<label style="font-size: 16px;margin-right: 5px;">数量 : <span style="font-size: 16px;" id="total" class="label label-default"></span> 元 </label>
		  	</div>
		    <div class="price" style="float: left;padding: 6px 2px;">
		    	<label style="font-size: 16px;margin-right: 5px;">总价 : <span style="font-size: 16px;" id="totalprice" class="label label-default">4</span> 元 </label>
		    </div>
		    
		    <div class="button" style="padding: 0px 20px;">
		    	<button type="button" style="float: right;width: 70px;" onclick="javascript:send();" class="btn btn-success">结算</button>
		    </div>
				
		  </div>
		</nav>
	<script type="text/javascript">
		function send() {
			if($("#totalprice").html()*1==0)
			{
				alert('请选择菜品....');
				return false;
			}
			var cart = getCart();
			$.post('{{U("saveCart")}}', cart, function(data) {
				location.href = "{{U('order')}}";
			})
		}
		</script>
		<script type="text/javascript">
		function jia(obj, id) {
			var input = $(obj).parent().find('input');
			var num = input.val() * 1 + 1;
			input.val(num)
				//购物车处理
			setCart(id, num);
			changeTotal();
		}

		function jian(obj, id) {
			var input = $(obj).parent().find('input');
			var num = input.val() * 1 - 1;
			if (num <= 0) {
				num = 0;
			}
			input.val(num)
				//购物车处理
			setCart(id, num);
			changeTotal();
		}
		$(function() {
				changeTotal();
				var cart = getCart();
				//更改商品数量
				for (var i in cart.data) {
					$("#" + i).val(cart.data[i]);
				}
			})
			//设置页面中的显示数量
		
		function changeTotal() {
				var cart = getCart();
				$("#total").html(cart.total);
				$("#totalprice").html(cart.totalprice);
				
			}
			//获取购物车清单
		
		function getCart() {
				var cart = localStorage.getItem('cart');
				if (!cart) {
					cart = {
						data: {},
						total: 0,
						totalprice: 0,
					};
				} else {
					cart = jQuery.parseJSON(cart);
				}
				return cart;
			}
			//加商品添加到购物车
		
		function setCart(id, num) {
			var cart = getCart();
			if(num==0)
			{
				delete cart.data[id];
			}
			else
			{
				cart.data[id]=num;
			}
			
			cart.total = 0;
			cart.totalprice = 0;			
			$("[name=num]").each(function(i){				
				cart.total += $(this).val()*1;
				cart.totalprice += $(this).val()*$(this).parents('table').find('.singleprice').html()*1;
			})
			
			
			localStorage.setItem('cart', JSON.stringify(cart));
			
		}
	</script>
	</body>
</html>
